<script setup lang="ts">
import { useRouter } from 'vue-router';
import { ref } from 'vue';
import { computed } from 'vue';
const title=ref('')
const location=ref('')
const backmoney=ref('')
const money=ref('')
const country=ref('')
const type=ref('')
const fileList = ref([]);
const router=useRouter()
const message=ref('')
const flag = computed(() => {
    return !title||!location||!backmoney||!money||!country||!type||!fileList||!message

})
function backClick(){
    router.go(-1)
}
function submitclick(){
    const housemessage=ref(JSON.parse(localStorage.getItem("housemessage"))||[])
    const messagelist={
        title:title.value,
        location:location.value,
        backmoney:backmoney.value,
        money:money.value,
        country:country.value,
        type:type.value,
        fileList:fileList.value[0].content,
        message:message.value
    }
    console.log(messagelist);
    housemessage.value.push(messagelist)
    localStorage.setItem("housemessage",JSON.stringify( housemessage.value))
}
</script>
<template>

    <main class="box">
        <header class="header">
      <slot  name="left">
      <div class="back">
        <van-icon color="#d6d6d6" size="20" @click="backClick" name="arrow-left" />
        <span @click="backClick">返回</span>
      </div>
 
      </slot>
      <span>发布房源</span>
      <slot name="right"></slot>
  </header>
    <div class="content"> 
    <div class="box">
        <van-field class="field" v-model="title" label="标题" placeholder="请输入标题" />
        <van-field class="field" v-model="location" label="地址" placeholder="请输入地址" />
        <van-field class="field" v-model="backmoney" label="押金" placeholder="请输入押金" />
        <van-field class="field" v-model="money" label="租金" placeholder="请输入租金" />
        <van-field class="field" v-model="country" label="地方区域" placeholder="请输入地方区域" />
        <van-field class="field" v-model="type" label="租房类型" placeholder="请输入租房类型" />
        <van-field class="field" v-model="message" label="补上说明" placeholder="请填写您对民宿的描述和介绍" />
        <van-field class="field"  label="上传图片"  >
        </van-field>
        <van-uploader  type="file"  icon="plus"  class="custom-uploader" v-model="fileList" multiple :max-count="1" reupload />
    </div>
    <button class="login" :disabled="flag" @click="submitclick" >提交</button>
    </div>
    </main>
</template>

<style lang="scss" scoped>
.header{
    color: black;
    background-color: white;
   .back{
    position: absolute;
    left: 0;
    top: 0;
    span{
        color: blue;
    }
   }
}
.content{
    background-color: #f4f6f9;
    width: 100%;
    .box{
        margin-top: 30px;
        .field{
        width: 100%;
        height: 0.6rem;
        font-size: 18px;
     
    }
    
    .custom-uploader {  
            width: 100px;  
            height: 100px; 
            border: 1px solid #ddd;
            border-radius: 5px;
        }
    }
    .login{
        width: 90%;
        height: 60px;
        margin: 10px 5%;
        background-color: #4a73ff;
        border-radius: 15px;
        border: 1px solid transparent;
        color: white;
        font-size: 20px;
    }
  
}


</style>
    